<template>
  <div :class="'teamwork ' + (!tBoot?'teamwork-tc-hide':'')" :style="!bootShow?'opacity:1':''" v-show="!boot">
    <div @click="tClick" class="teamwork-mb"></div>
    <div :style="
    (tWidth ? 'max-width:'+ tWidth + ';width:auto;margin-left:calc( -'+ tWidth +' / 2 );': '')+
    (tHeight ? 'max-height:'+ tHeight + ';top:calc( (100% - '+ tHeight +') / 2 );': '')+
     (!bootShow?'top: 12.5%':'')
    " class="teamwork-tc">
      <div :class="'teamwork-text ' + (bootShow ? 'teamwork-text-hide-left' : '')" :style="!tBoot ? 'width:50%' : ''">
        <div class="teamwork-text-show" :style="(tWidth ? 'width:'+ tWidth : '')">
          <slot name="header"></slot>
          <slot name="main"></slot>
          <slot name="footer"></slot>
        </div>
      </div>
      <div @click="tClick" :style="!tBoot ? 'width:50%;opacity: 1;' : 'opacity: 0;'" :class="'teamwork-text ' + (bootShow ? 'teamwork-text-hide-right' : '')">
        <div class="teamwork-text-show" :style="(tWidth ? 'width:'+ tWidth : '')"></div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'popup',
    props: {
      tClick: {
        type: Function,
        default: null
      },
      tWidth: {
        type: String,
        default: undefined
      },
      tHeight: {
        type: String,
        default: undefined
      },
      tBoot: {
        type: Boolean,
        default: true
      }
    },
    data() {
      return {
        boot: true,
        bootShow: true
      }
    },
    watch: {
      tBoot: function() {
        if (!this.boot) {
          this.bootShow = !this.bootShow;
          setTimeout(function() {
            this.boot = !this.boot;
          }.bind(this), 500)
        } else {
          this.boot = !this.boot;
          setTimeout(function() {
            this.bootShow = !this.bootShow;
          }.bind(this), 10)
        }
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  /*弹窗*/
  .teamwork{
    transition: .5s;
    opacity: 0;
    position: fixed;
    width:100%;
    height:100%;
    top:0;
    left:0;
    /*z-index: 2050;*/
    z-index: 1000;
    i{
      font-style: normal;
    }
    .teamwork-mb{
      opacity: .3;
      -moz-opacity: .3;
      filter: alpha(opacity=30);
      width:100%;
      height:100%;
      background: #000;
    }
    .teamwork-tc{
      transition: .5s;
      position: fixed;
      overscroll-behavior: contain;
      left: 50%;
      top: 45%;
      width:735px;
      height:75%;
      min-height: 165px;
      margin-left: calc( -735px /2 );
      .teamwork-text-hide-left{
        transform-origin: left bottom;
        transform: rotate(-45deg);
        transition:transform .5s;
      }
      .teamwork-text-hide-right{
        transform-origin: right bottom;
        transform: rotate(45deg);
        transition:transform .5s;
      }
      .teamwork-text{
        overflow: hidden;
        position: relative;
        width:100%;
        height:100%;
        background: #fff;
        float: left;
        /*margin:10vh auto 5vh;*/
        //border:3px solid #666666;
        border-radius: 5px;
        .teamwork-text-show{
          height: 100%;
          width:735px;
        }
        .teamwork-text-title{
          height:60px;
          line-height: 60px;
          border-bottom: 1px solid #f2f2f2;
          margin:0px;
          padding:0 30px;
          overflow: hidden;
          .svg-icon{
            margin-top: 22px;
          }
        }
        .teamwork-text-nr{
          padding: 20px 30px 40px;
          height:77%;
          height:calc(100% - 116px);
          height:-moz-calc(100% - 116px);
          height:-webkit-calc(100% - 116px);
          overflow-y: auto;
          .buttcur{
            margin-top: 15px;
            &:nth-child(2){
              margin-top: 0px;
            }
          }
          .money{
            margin-top: 15px;
            &:nth-child(2){
              margin-top: 0px;
            }
          }
        }
      }
    }
  }
  .teamwork-tc-hide{
    opacity: 0;
    .teamwork-tc{
      top:-100px;
    }
  }
</style>
